<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 地盘 -->
      <!-- 属性绑定 -->
      <input type="text" v-bind:value="userName" />
      <!-- 简写 -->
      <input type="text" :value="userName" />
      <hr />
      <input :type="open?'text':'password'" />
      <span>{{open?"关":"开"}}</span>
      <hr />
      <img :src="url" alt="" style="width: 300px" />
      <hr />
      <img :src="banners[count]" alt="" style="width: 300px" />
    </div>
  </body>
  <script>
    let { createApp } = Vue;
    // 创建Vue根实例
    let app = createApp({
      data() {
        // 可以在模板中绑定的数据
        return {
          userName: "张三",
          open: true,
          url: "https://img2.baidu.com/it/u=2363900005,280886924&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
          banners: [
            "https://img2.baidu.com/it/u=2363900005,280886924&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
            "https://img0.baidu.com/it/u=1598850878,59814561&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
            "https://img0.baidu.com/it/u=2215715549,4273949142&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
          ],
          count: 1,
        };
      },
    });
    app = app.mount("#app"); //指定容器
  </script>
</html>
